<template>
  <div class="hd Confirm">
    <div class="hd mt10">
      <img src="../../assets/banner03.png">
    </div>

    <div class="hd mt10">
      <sider-menu  :activeNumber="4"></sider-menu>
      <div class="right-content">
        <position style="padding:12px;width:auto;">
          <router-link to="/personal">个人中心</router-link>
          &gt;
          <span class="last">修改密码</span>
        </position>

        <div class="clearfix main hd" style="width:500px;padding:50px;">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  label-width="100px">
        
          <el-form-item label="原密码" prop="oldPassword" required>
            <el-input v-model="ruleForm.oldPassword" type="password" placeholder="请输入原密码" ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword" required>
            <el-input v-model="ruleForm.newPassword" type="password" placeholder="6-20位数字或字母密码" :maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="confirmNewPassword" required>
            <el-input v-model="ruleForm.confirmNewPassword"  type="password" placeholder="请确认新密码" :maxlength="20"></el-input>
          </el-form-item>
         
       </el-form>

       <div class="center" slot="footer">
        <a href="javascript:;" class="common-main-button"  @click="confirmSubmit('ruleForm')">提交</a>
      </div>

        </div>
      </div>
    </div>


  </div>
</template>

<script>
import Position from '../../components/Position'
import SiderMenu from '../../components/SiderMenu'
import {requestModifyPassword, PLATFORM_PREFIX} from  '../../api/api'
import md5 from 'md5'

export default {
  data () {
    return {
      dialogShow: false,
      person: {phoneNo: localStorage.phoneNumber || ''},
      ruleForm: {
        oldPassword: '',
        newPassword: '',
        confirmNewPassword: ''
      },
      rules: {
        oldPassword: [
          {required: true, message: '密码不能为空'},
          { min: 6, max: 20, message: '密码长度位6-20字符', trigger: 'blur' }
        ],
        newPassword: [
          {required: true, message: '密码不能为空'},
          { min: 6, max: 20, message: '密码长度位6-20字符', trigger: 'blur' }
        ],
        confirmNewPassword: [
          {required: true, message: '密码不能为空'},
          { min: 6, max: 20, message: '密码长度位6-20字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    if (!localStorage.accessToken) {
			this.$message({message: '请先登录', type: 'error'})
			return
		}
  },
  methods: {
    confirmSubmit (form) {
      this.$refs[form].validate(valid => {
        if (!valid) {
          return false
        }
        if (this.ruleForm.confirmNewPassword !== this.ruleForm.newPassword) {
          this.$message({message: '两次输入的密码不一致', type: 'error'})
          return false
        }
        // 只验证身份证格式
        this.$store.commit('UPDATE_LOADING')
        requestModifyPassword({
          originalPwd: md5(this.ruleForm.oldPassword),
          newPwd: md5(this.ruleForm.newPassword)
        }).then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$router.replace('/personal')
            setTimeout(() => location.reload(), 1500)
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        }).catch(res => {
          this.$store.commit('UPDATE_LOADING')
          this.$message({
            message: '请求服务器失败',
            type: 'error'
          })
        })
      })
    }
  },
  components: {Position, SiderMenu}
};
</script>


